<template>
    <Item v-if="$attrs.type" ref="item" v-bind="$attrs" />
    <a-form-item v-else v-bind="$attrs" ref="item">
        <slot></slot>
    </a-form-item>
</template>
<script setup>
import { inject, onMounted, onUnmounted, ref, shallowRef, useAttrs } from "vue";
import Children from './InstallChildren.js';

const $attrs = useAttrs();
const Item = shallowRef(Children[$attrs.type]);
const item = ref();

const SetRef = inject('SetRef');
const SetItemKey = inject('SetItemKey');
const DeleteItemKey = inject('DeleteItemKey');

const handleItemKey = (action) => {
    if (typeof $attrs.itemkey === 'string') {
        action($attrs.itemkey);
    } else if (Array.isArray($attrs.itemkey)) {
        $attrs.itemkey.forEach(key => action(key));
    }
};

handleItemKey(SetItemKey);

onMounted(() => SetRef(item.value));
onUnmounted(() => handleItemKey(DeleteItemKey));

defineExpose({
    ref() {
        return item.value;
    }
});
</script>
<style lang="less" scoped></style>